<template>
  <div class="home">
    <el-container>
      <el-aside>
        <div class="logo_menu">
          <!-- <img class="logo2" src="../assets/img/xxx.png" alt /> -->
          这里放个LOGO
        </div>
        <menu-item />
      </el-aside>
      <el-container>
        <el-header>
          <header-bar />
        </el-header>
        <el-main>
          <router-view />
          <el-footer> I'm a placeholder </el-footer>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import MenuItem from '../components/MenuItem.vue';
import HeaderBar from '../components/HeaderBar.vue';
</script>
<style scoped lang="scss">
.home {
  height: 100%;
  width: 100%;
  display: flex;
  min-width: 1200px;
}

.logo_menu {
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 18px;

  img {
    height: 32px;
    margin-left: 16px;
  }
}

.el-aside {
  display: flex;
  flex-direction: column;
  background-color: #011529;
  width: initial !important;
}

.el-header {
  padding: 0;
  border-bottom: 1px solid #eee;
}

.el-main {
  background-color: #f0f2f5;
  // padding: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.el-footer {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}
</style>
